<nz-card>
  <nz-descriptions
    nzTitle="基础信息"
    nzBordered
    nzSize="middle"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="活动ID">
      {{ detailDatas?.id }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="状态">
      <span
        *ngIf="detailDatas.status || detailDatas.status == 0"
        [ngStyle]="{'color': detailDatas.status | customizedDescentStatus: 'color'}">
        {{ detailDatas.status | customizedDescentStatus: 'label' }}
      </span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="活动名称(内部可见)">
      {{ detailDatas?.name || '-' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="前端标题(外部可见)">
      {{ detailDatas?.showCopy || '-' }}
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="活动类型">
      <div [ngSwitch]="detailDatas.type">
        <div *ngSwitchCase="1">满减</div>
        <div *ngSwitchCase="2">满折</div>
        <div *ngSwitchCase="3">多件折扣</div>
        <div *ngSwitchDefault>-</div>
      </div>
    </nz-descriptions-item>
    <nz-descriptions-item
      nzTitle="优惠方式"
      *ngIf="[1, 2].includes(detailDatas.type)">
      <ng-container *ngIf="detailDatas.type === 1;else templateFs">
        满 {{ detailDatas?.orderLimitMoney || '0' }} 元减免 {{ detailDatas?.limitSmall || '0' }} 元
      </ng-container>
      <ng-template #templateFs>
        满 {{ detailDatas?.orderLimitMoney || '0' }} 元，
        打 {{ detailDatas?.limitSmall }} 折，最高减免 {{ detailDatas?.limitBig }} 元
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="优惠券叠加">
      {{ detailDatas?.isPlusCoupons === 0 ? '是' : '否' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="适用品类">
      {{ categoryTypeFilter(detailDatas.containsTypes) }}
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="领取人限制">
      <div [ngSwitch]="detailDatas?.userType">
        <div *ngSwitchCase="0">
          <nz-tag>不限制</nz-tag>
        </div>
        <div *ngSwitchCase="1">
          <nz-tag [nzColor]="'#87d068'">C端</nz-tag>
        </div>
        <div *ngSwitchCase="2">
          <nz-tag [nzColor]="'#2db7f5'">B端</nz-tag>
        </div>
        <div *ngSwitchDefault>-</div>
      </div>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="创建时间">
      {{ detailDatas?.createTime || '-' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="有效时间" nzSpan="3">
      {{ detailDatas?.beginTime || '' }} ~ {{ detailDatas?.endTime || '' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="备注" nzSpan="4">
      {{ detailDatas?.remark || '-' }}
    </nz-descriptions-item>
  </nz-descriptions>
</nz-card>

<nz-card
  *ngIf="discountTable?.length"
  nzTitle="多件折扣"
  class="m-t-4">
  <nz-table
    #multipleTable
    nzSize="small"
    nzBordered
    [nzFrontPagination]="false"
    [nzData]="discountTable">
    <thead>
      <tr>
        <th nzAlign="center">>=件数</th>
        <th nzAlign="center">折扣率</th>
        <th nzAlign="center">最多减免</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of multipleTable.data">
        <td nzAlign="center">{{data.number || '-'}}</td>
        <td nzAlign="center">{{data.discountRate || '-'}}</td>
        <td nzAlign="center">{{data.maxReduction || '-'}}</td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<nz-card class="m-t-4">
  <nz-descriptions
    nzTitle="使用信息"
    nzBordered
    nzSize="middle"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="参与人数">{{ detailAllDatas?.peopleCount || '0' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="活动总成交额">{{ detailAllDatas?.tprcSum || '0' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="活动优惠总金额" nzSpan="2">{{ detailAllDatas?.aprcSum || '0' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="购买商品数">{{ detailAllDatas?.goodsCount || '0' }}</nz-descriptions-item>
  </nz-descriptions>
</nz-card>